<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/tlds/c.tld" prefix="c"%>
<%@ taglib uri="/WEB-INF/tlds/fmt.tld" prefix="fmt"%>
<%@ taglib uri="/WEB-INF/tlds/tiles-jsp.tld" prefix="tiles"%>
<c:set var="appCtx" value="${pageContext.request.contextPath}" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link
	href="${pageContext.request.contextPath}/resources/css/standard/main.css"
	rel="stylesheet" type="text/css" media="screen" />
<link type="text/css"
	href="${pageContext.request.contextPath}/resources/css/jquery-ui/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/js/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/js/jquery/jquery-ui-1.8.16.custom.min.js"></script>

<script
	src="${pageContext.request.contextPath}/resources/js/other/jquery-masked-input.js"
	type="text/javascript"></script>

<script type="text/javascript">
//la gran mayoria de las inicializaciones van en el ready()
$(function() {
	$("td button").button();
	$("#botonHola").button().bind('click', function() {$("#botonHola").blur();});

   	$("#telefono").mask("+99 (99) 9-999-9999");
	
   	
   	$( "textarea" ).resizable({ disabled: true });
});
</script>
<style type="text/css">
center pre {
	text-align: left;
}


</style>
</head>
<body>
	<div id="layoutContainer">
	<table id="layout">
		<tr>
			<td colspan="2" id="header"><%@include
					file="./../jsp/structure/header.jsp"%></td>
		</tr>
		<tr>
			<td id="strut" colspan="2"></td>
		</tr>
		<tr>
			<td></td>
		</tr>
		<tr id="middle">
			<td id="navigation-menu"><%@include
					file="./../jsp/structure/navigation-menu.jsp"%></td>
			<td id="content">
				<!-- EJEMPLO ACA -->
				<form class="form">
					<fieldset>
						<legend>Formualrio de ejemplo</legend>
						<table cellpadding="3" cellspacing="3" border="1">
							<tr>
								<td colspan="2" class="formNotice">Los campos marcados con
									* son obligatorios</td>
							</tr>
							<tr>
								<td class="formLabel"><label for="nombre">Nombre:</label></td>
								<td><input type="text" name="nombre" id="nombre" value="" /><span
									class="errorLabel">${form_errors['nombre'].errorMessage}</span></td>
							</tr>
							<tr>
								<td class="formLabel"><label for="apellido">Apellido:</label></td>
								<td><input type="text" name="apellido" id="apellido"
									value="" /><span class="errorLabel">${form_errors['nombre'].errorMessage}</span></td>
							</tr>
							<tr>
								<td class="formLabel"><label for="telefono">Telefono:</label></td>
								<td><input type="text" name="telefono" id="telefono"
									value="" /><span class="errorLabel">${form_errors['email'].errorMessage}</span></td>
							</tr>
							<tr>
								<td class="formLabel"><label for="login">Nombre de
										usuario:</label></td>
								<td><input type="text" name="login" id="login" value="" /><span
									class="errorLabel">${form_errors['login'].errorMessage}</span></td>
							</tr>
							<tr>
								<td class="formLabel"><label for="Nivel">Nivel:</label></td>
								<td><select name="Nivel" id="Nivel" >
								<option value="1"
										<c:if test="${userForm.rolId == 1}">selected=selected</c:if>>Admin</option>
									<option value="2"
										<c:if test="${userForm.rolId == 1}">selected=selected</c:if>>User</option>
									</select></td>
							</tr>
							<tr>
								<td class="formLabel"><label for="rolId">Idiomas:</label></td>
								<td><select name="idiomas" id="idiomas" size="3"
									multiple="multiple" >
								<option value="1">Español</option>
									<option value="1">Ingles</option>
									<option value="1">Portugues</option>
									<option value="1">Chino</option>
									</select></td>
							</tr>
							<tr>
								<td class="formLabel"><label for="tipo">Tipo:</label></td>
								<td>
									<ul>
										<li><input type="radio" name="tipo" id="tipo1" value="" />Tipo 1</li>
										<li><input type="radio" name="tipo" id="tipo2" value="" />Tipo 1</li>
										<li><input type="radio" name="tipo" id="tipo3" value="" />Tipo 1</li>
									</ul>
									<span class="errorLabel">${form_errors['login'].errorMessage}</span>
								</td>
							</tr>
							<tr>
								<td class="formLabel"><label for="tipo">Grado:</label></td>
								<td>
									<ul>
										<li><input type="checkbox" name="grado1" id="grado1" value="" />Grado1</li>
										<li><input type="checkbox" name="grado2" id="grado2" value="" />grado2</li>
										<li><input type="checkbox" name="grado3" id="grado3" value="" />grado3</li>
									</ul>
									<span class="errorLabel">${form_errors['login'].errorMessage}</span>
								</td>
							</tr>
							<tr>
								<td class="formLabel"><label for="tipo">Comentarios:</label></td>
								<td>
									<textarea name="comentarios" id="comentarios" cols="20" rows="5"></textarea>
									<span class="errorLabel">${form_errors['login'].errorMessage}</span>
								</td>
							</tr>
							<tr>
								<td colspan="2" class="formActions">
									<button>Aceptar</button>
									<button>Cancelar</button>
								</td>
							</tr>
							<tr>
								<td colspan="2"><pre>
Formularios:
Los formularios llevan asociada la class "form"
Siempre usar &lt;fieldset&gt; para encerrar los campos
Siempre usar &lt;legend&gt; para darle un titulo
La primer fila de la tabla puede contener algun mensaje.

Los formularios se dispondrán usando tablas. La primer columna tendrá el label y la segunda el campo.
Siempre se debe usar &lt;label for="nombre_campo"&gt;Nombre del campo:&lt;/label&gt;
Contiguo al campo se debe especificar un &lt;span&gt;&lt;/span&gt; con class "errorLabel" que contendrá
el error, de existir.
Una fila cualquiera de la tabla qeudaría, por ejemplo:
&lt;tr&gt;
	&lt;td&gt;
	&lt;label for="nombre"&gt;Nombre:&lt;/label&gt;
	&lt;/td&gt;
	&lt;td&gt;
		&lt;input type="text" name="nombre" id="nombre" value="${bean.property}" /&gt;
		&lt;span class="errorLabel"&gt;
			${errors_obj['error_prop'].errorMessage}
		&lt;/span&gt;
	&lt;/td&gt;
&lt;/tr&gt;

Respecto del js necesario para los componentes, las funciones irán encerradas dentro del ready() de js.

Campos de entrada. 
Para texto:
&lt;input type="text" name="nombre" id="nombre" value="${bean.property}" /&gt;

Para combos, simples o multples (notar el uso de c:if para obtener el item seleccionado de ser 
necesario):
&lt;tr&gt;
	&lt;td class="formLabel"&gt;&lt;label for="Nivel"&gt;Nivel:&lt;/label&gt;&lt;/td&gt;
	&lt;td&gt;&lt;select name="Nivel" id="Nivel" /&gt;
	&lt;option value="1"
			&lt;c:if test="${userForm.rolId == 1}"&gt;selected=selected&lt;/c:if&gt;&gt;Admin&lt;/option&gt;
		&lt;option value="2"
			&lt;c:if test="${userForm.rolId == 1}"&gt;selected=selected&lt;/c:if&gt;&gt;User&lt;/option&gt;
		&lt;/select&gt;&lt;/td&gt;
&lt;/tr&gt;
ó
&lt;tr&gt;
	&lt;td class="formLabel"&gt;&lt;label for="rolId"&gt;Idiomas:&lt;/label&gt;&lt;/td&gt;
	&lt;td&gt;&lt;select name="idiomas" id="idiomas" size="3"
		multiple="true" /&gt;
	&lt;option value="1"&gt;Español&lt;/option&gt;
		&lt;option value="1"&gt;Ingles&lt;/option&gt;
		&lt;option value="1"&gt;Portugues&lt;/option&gt;
		&lt;option value="1"&gt;Chino&lt;/option&gt;
		&lt;/select&gt;&lt;/td&gt;
&lt;/tr&gt;


Para listas de seleccion, ya sean radios o checkboxes se usará una lista, cuyos estilos estan en el
main.css para lograr el layout deseado:
&lt;tr&gt;
	&lt;td class="formLabel"&gt;&lt;label for="tipo"&gt;Tipo:&lt;/label&gt;&lt;/td&gt;
	&lt;td&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;input type="radio" name="tipo" id="tipo1" value="" /&gt;Tipo 1&lt;/li&gt;
			&lt;li&gt;&lt;input type="radio" name="tipo" id="tipo2" value="" /&gt;Tipo 1&lt;/li&gt;
			&lt;li&gt;&lt;input type="radio" name="tipo" id="tipo3" value="" /&gt;Tipo 1&lt;/li&gt;
		&lt;/ul&gt;
		&lt;span class="errorLabel"&gt;${form_errors['login'].errorMessage}&lt;/span&gt;
	&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
	&lt;td class="formLabel"&gt;&lt;label for="tipo"&gt;Grado:&lt;/label&gt;&lt;/td&gt;
	&lt;td&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;input type="checkbox" name="grado1" id="grado1" value="" /&gt;Grado1&lt;/li&gt;
			&lt;li&gt;&lt;input type="checkbox" name="grado2" id="grado2" value="" /&gt;grado2&lt;/li&gt;
			&lt;li&gt;&lt;input type="checkbox" name="grado3" id="grado3" value="" /&gt;grado3&lt;/li&gt;
		&lt;/ul&gt;
		&lt;span class="errorLabel"&gt;${form_errors['login'].errorMessage}&lt;/span&gt;
	&lt;/td&gt;
&lt;/tr

Máscaras para los campos. Se usará jquery masked input. En el ready(), se puede usar la siguiente linea
como para generar un nro de telefono completo con codigo internacional
$("selector").mask("+99 (99) 9-999-9999"); 

esta linea solo dejaria ingrear algo de tipo: +54 (11) 4-5173-6130

Para más detalles y ejemplos, ver: <a href="http://digitalbush.com/projects/masked-input-plugin/">aca</a> 


Textarea:
&lt;textarea name="comentarios" id="comentarios" cols="20" rows="5"&gt;&lt;/textarea&gt;

Un tema importante para el textarea es que sea o no resizable. Con jqueryUI es por default resizable,
para evitarlo, en el ready() hay que llamar a la funcion que detenga ese ocmportamiento:
	$( "selector" ).resizable({ disabled: true });

Boton:  
Para inicializar un boton, se usa el std de jq-ui: $("selector").button()
Entonces, si tengo un boton  &lt;button id="botonHola&gt;Hola&lt;/button&gt;. Entonces la llamada:
$("#botonHola").button();
Generará:
<button id="botonHola">Hola</button>

Event handlers:
Los event handlers nunca serán "inline". Es decir, se usará la funcionalidad de jquery para attachar
eventos a los componentes. Por ejemplo:
$("#botonHola").click(function(evt){alert("click en hola!")});
ó
$("#botonHola").click(function(evt){miHandler(evt)});
Para más detalles de como bindear eventos, consultar la doc de jquery

Si incluimos el button en un fomrulario, la acción por default de este es enviar el formulario.
Para evitar esto, lo que se debe agregar en el handler el evt.preventDefault() en la primer línea.


Más abajo se puede ver cómo presentar resultados, o incluso cualquier otro contenido simulando
un cuadro como el de los fomrularios: Basta con seguir la siguiente receta:

				&lt;div class="genericContainer"&gt;
					&lt;div class="genericContainerTitle"&gt;Mi Titulo&lt;/div&gt;
					&lt;table&gt;
						&lt;tr&gt;
							&lt;td&gt;....&lt;/td&gt;
							&lt;td&gt;....&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/table&gt;
				&lt;/div&gt;

si se usan los divs anidados asi con esos estilos se logra el "legend" sobre el borde. Adentro puede
haber un table o cualquier otra cosa mientras haya esos dos divs anidados. 
<strong>Más abajo se puede ver el resultado:</strong>
	</pre></td>
							</tr>
							<tr>
								<td colspan="2">
									<div class="genericContainer">
									<div class="genericContainerTitle">Mi Titulo</div>
											<div id="resultados" style="margin:10px;">
												<div class="encabezadoDeResultado">
														<fmt:message key="message.searchResults" />
												</div>
												<table class="tablaDeResultado" style="width:100%;">
													<thead>
														<tr>
															<th>&nbsp;<fmt:message key="label.company.cuit" /></th>
															<th>&nbsp;<fmt:message key="label.company.corporateName" /></th>
															<th style="width:100px;">&nbsp;<fmt:message key="label.select" /></th>
														</tr>
													</thead>
													<tbody>
														<tr id="<c:out value='11'/>">
															<td>300306803065030</td>
															<td>CONDE SANTIAGO</td>
															<td><button class="seleccionarbtn"><fmt:message key="label.select" /></button></td>
														</tr>
														<tr id="<c:out value='22'/>">
															<td>300306803065030</td>
															<td>ASOCIACION PROPIETARIOS CONJUNTO URBANO</td>
															<td><button class="seleccionarbtn"><fmt:message key="label.select" /></button></td>
														</tr>
														<tr id="<c:out value='88'/>">
															<td>300306803065030</td>
															<td>ASOCIACION PROPIETARIOS CONJUNTO URBANO</td>
															<td><button class="seleccionarbtn"><fmt:message key="label.select" /></button></td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
								</td>
							</tr>
						</table>
					</fieldset>
				</form>
			</td>
		</tr>
		
		<tr>
			<td colspan="2"><%@include file="./../jsp/structure/footer.jsp"%></td>
		</tr>
	</table>
	</div>

</body>

</html>
